<template>
  <div class="home">
    <!-- 欢迎区域 -->
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <h3>欢迎使用qiankun微前端项目</h3>
        </div>
      </template>
      <div class="welcome-content">
        <p>这是一个基于qiankun框架构建的微前端项目，包含以下功能：</p>
        <ul>
          <li>主应用：基于Vue 3 + Vite构建</li>
          <li>React子应用：基于React 18 + Vite构建</li>
          <li>Vue子应用：基于Vue 3 + Vite构建</li>
        </ul>
        <p>点击上方导航栏可以访问不同的子应用。</p>
      </div>
    </el-card>

    <!-- 应用信息卡片 -->
    <div class="app-cards">
      <el-card class="app-card">
        <template #header>
          <div class="card-header">
            <h4>主应用</h4>
          </div>
        </template>
        <div class="app-info">
          <p><strong>技术栈：</strong>Vue 3 + Vite + Element Plus</p>
          <p><strong>端口：</strong>8080</p>
          <p><strong>功能：</strong>提供统一的导航和布局</p>
        </div>
      </el-card>

      <el-card class="app-card">
        <template #header>
          <div class="card-header">
            <h4>React子应用</h4>
          </div>
        </template>
        <div class="app-info">
          <p><strong>技术栈：</strong>React 18 + Vite + Ant Design</p>
          <p><strong>端口：</strong>3000</p>
          <p><strong>功能：</strong>提供React相关的功能模块</p>
        </div>
      </el-card>

      <el-card class="app-card">
        <template #header>
          <div class="card-header">
            <h4>Vue子应用</h4>
          </div>
        </template>
        <div class="app-info">
          <p><strong>技术栈：</strong>Vue 3 + Vite + Element Plus</p>
          <p><strong>端口：</strong>3001</p>
          <p><strong>功能：</strong>提供Vue相关的功能模块</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
/**
 * 首页组件
 * @description 展示项目介绍和应用信息
 */
export default {
  name: 'Home'
}
</script>

<style scoped>
/* 首页样式 */
.home {
  max-width: 1200px;
  margin: 0 auto;
}

/* 欢迎卡片样式 */
.welcome-card {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3,
.card-header h4 {
  margin: 0;
  color: #303133;
}

.welcome-content {
  line-height: 1.6;
}

.welcome-content ul {
  margin: 15px 0;
  padding-left: 20px;
}

.welcome-content li {
  margin: 8px 0;
}

/* 应用卡片样式 */
.app-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.app-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.app-info p {
  margin: 10px 0;
  line-height: 1.5;
}

.app-info strong {
  color: #409eff;
}
</style> 